<template>
  <div class="app-container">  
      <el-form ref="filterForm" :model="formData" :rules="rules" label-position="left" label-width="100px">
        <el-form-item label="优惠卷名称" prop="couponName">
          <el-input v-model="formData.couponName" clearable placeholder="优惠卷名称" maxlength="80" show-word-limit/>
        </el-form-item>
        <el-form-item label="优惠卷类型" prop="couponType">          
            <el-radio-group v-model="formData.couponType">
              <el-radio-button label="1">现金卷</el-radio-button>
              <el-radio-button label="2">折扣卷</el-radio-button>
              <el-radio-button label="3">兑换卷</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="优惠卷介绍" prop="couponContent">
          <el-input type="textarea" v-model="formData.couponContent" maxlength="200" show-word-limit clearable placeholder="机构介绍"/>
        </el-form-item>
        <el-form-item label="使用条件" prop="couponType">   
          满
          <el-input-number v-model="formData.couponAmount" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          无门槛
        </el-form-item>
        <el-form-item label="优惠折扣" prop="couponDiscount">
          <el-input-number v-model="formData.couponAmount" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          元
          折
        </el-form-item>
        <el-form-item label="适用产品" prop="couponContent">
          <el-input type="textarea" v-model="formData.couponContent" maxlength="200" show-word-limit clearable placeholder="机构介绍"/>
        </el-form-item>
        <el-form-item label="有效期" >
          <el-date-picker 
          clearable
            v-model="formData.beginTime" placeholder="选择日期"
            type="datetime">
          </el-date-picker>
          <el-date-picker 
          clearable
            v-model="formData.endTime" placeholder="选择日期"
            type="datetime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="领取时间" >
          <el-date-picker 
          clearable
            v-model="formData.receiveBeginTime" placeholder="选择日期"
            type="datetime">
          </el-date-picker>
          <el-date-picker 
          clearable
            v-model="formData.receiveEndTime" placeholder="选择日期"
            type="datetime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="适用产品" >
      <el-table
      :data="formData.product"
      border
      style="width: 100%">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
        label="产品名称">
        <template slot-scope="{row}">
          <span>{{row.prodName}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="产品价格" width="140">
        <template slot-scope="{row}">
          <span>{{row.prodName}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="240">
        <template slot-scope="{row}">
          <el-button @click="handleUpdate(row.ID)">编辑</el-button>
          <el-button v-if="row.documentStatus == 3" type="info" @click="handleUpdate(row.ID)">下架</el-button>
          <el-button v-if="row.documentStatus == 4" type="primary" @click="handleUpdate(row.ID)">上架</el-button>
        </template>
      </el-table-column>
      </el-table>
        </el-form-item>
        <el-form-item label="不适用产品" >
      <el-table
      :data="formData.product"
      border
      style="width: 100%">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
        label="产品名称">
        <template slot-scope="{row}">
          <span>{{row.prodName}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="产品价格" width="140">
        <template slot-scope="{row}">
          <span>{{row.prodName}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="240">
        <template slot-scope="{row}">
          <el-button @click="handleUpdate(row.ID)">编辑</el-button>
          <el-button v-if="row.documentStatus == 3" type="info" @click="handleUpdate(row.ID)">下架</el-button>
          <el-button v-if="row.documentStatus == 4" type="primary" @click="handleUpdate(row.ID)">上架</el-button>
        </template>
      </el-table-column>
      </el-table>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="formData.remark" maxlength="200" show-word-limit clearable placeholder="备注"/>
        </el-form-item>
      </el-form>
      <el-row :gutter="20">
        <el-col :span="14">          
            <el-button type="info" @click="onFormSaveButton()">保存</el-button>
            <el-button type="primary" @click="onFormSaveAndNewButton()">保存并新建</el-button>
            <el-button type="primary" @click="onFormNewButton()">新建</el-button>
        </el-col>
        <el-col :span="6" style="text-align:right;">          
          <el-button type="warning" @click="onFormCannelButton()">取消</el-button>
          <el-button type="danger" v-if="couponID > 0" @click="onFormRemoveButton()">删除</el-button>
        </el-col>
      </el-row>

  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Region from '@/components/Region/RegionSimple'
import Upload from '@/components/Upload/SingleImage3'
import {getCouponDetail,saveCoupon,removeCoupon} from '@/api/marketing/coupon'



export default {
  name: 'couponForm',
  components: { Region,Upload },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      couponID:undefined,
      formData: {
        product:[]
      },
      rules:{
         couponName: [
            { required: true, message: '请输入机构名称', trigger: 'blur' },
            { min: 3, max: 80, message: '长度在 3 到 80 个字符', trigger: 'blur' }
          ],
         establishDate: [
            { required: true, message: '请选择/输入成立日期', trigger: 'blur' },
            { len: 10, message: '日期应为10位', trigger: 'blur' }
          ],
         couponRegAddress: [
            { required: true, message: '请输入机构注册地址', trigger: 'blur' },
            { min: 2, max: 80, message: '长度在 2 到 80 个字符', trigger: 'blur' }
          ],
      }
    }
  },
  created() {
    let couponID = this.$route.query.couponID 
    couponID = parseInt(couponID)
    if(isNaN(couponID) == false){
      this.couponID = couponID
      this.getInfo()
    }
  },
  methods: {
    getInfo:function(){
      let _this = this;
      getCouponDetail({
        "couponID":this.couponID
      }).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            this.formData = response.data
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    onFormSaveButton:function(){
      let _this = this;
      this.$refs['filterForm'].validate((valid) => {
        if (valid) {
            
            saveCoupon(_this.formData).then((response) => {
              console.log("getList",response)
                if (response.code === 200) {
                  _this.$message({
                    message: "成功",
                    type: 'error'
                  })
                } else {
                  _this.$message({
                    message: response.msg,
                    type: 'error'
                  })
                }
            })
        } else {
            console.log('error submit!!');
            return false;
        }
      })
    },
    onFormSaveAndNewButton:function(){
      let _this = this;
      saveCoupon(_this.formData).then((response) => {
          if (response.code === 200) {
            _this.onFormNewButton()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    onFormNewButton:function(){
        this.formData = {

        }
    },
    onFormCannelButton:function(){
      this.$router.push({ path: 'coupon'})
    },
    onFormRemoveButton:function(){
      let _this = this;
      removeCoupon({
        "couponID":this.couponID
      }).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.onFormCannelButton()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    }
  }
}
</script>
<style>
</style>